<!--
// 
// SMSCode.vue
// rzhwweb
// 
// Created by 区区电脑 on 2024/07/10.
// 
-->
<template>
    <div class="SMSCode">
        <el-input v-model="model.smsCode" @input="onChange" class="main-input"/>
        <div class="button">
            <el-button v-if="state.isSend" disabled class="main-button" type="primary" style="cursor: not-allowed">已发送({{state.time}}s)</el-button>
            <el-button v-else type="primary" class="main-button" :loading="state.isSending" @click="checkPhone">发送验证码</el-button>
        </div>
        <div v-if="showImgCode" class="img-code-container">
            <div class="label">请输入图形验证码</div>
            <div class="img-code">
                <img :src="imgCode" class="img-code-img" @click="refreshImgCode" />
                <el-input v-model="model.code" style="width: 120px;" />
            </div>
            <div class="actions">
                <el-button type="primary" plain @click="showImgCode=false">取消</el-button>
                <el-button type="primary" @click="codeOk">确定</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, reactive, computed, watch, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import request from "@/request"


function GetCaptcha() {
    return request({url: "/api/Login/GetCaptcha", method: "get"})
}
function GetSMSCaptcha(data) {
    return request({url: "/api/Login/GetSMSCaptcha", method: "post", data})
}

const props = defineProps({
    modelValue: {type: String, default: () => ""},
    phone: {type: String, default: () => ""},
    type: {type: [String, Number], required: true},
});
const emits = defineEmits();

// 路由
const router = useRouter();
// store
const store = useStore();

const showImgCode = ref(false);

const imgCode = ref("");

const model = reactive({
    code: null,
    codeId: null,
    smsCode: null,

})
const state = reactive({
    isSend: false,
    timer: null,
    time: 60,
})

/**
 * 校验手机号
 */
function checkPhone() {
    if (!props.phone) return $message.warning("请输入手机号")
    if (state.isSending) return
    showImgCode.value = true
}

/**
 * 输入短信验证码
 */
function onChange() {
    emits("update:modelValue", model.smsCode);
}


// 获取图形验证码
async function refreshImgCode() {
    model.code = null;
    model.codeId = null;
    const {success, data} = await GetCaptcha();
    if (!success) return;
    model.codeId = data.id;
    imgCode.value = "data:image/jpeg;base64," + data.img
}

/**
 * 输入图形验证码后发送短信
 * @returns {Promise<*>}
 */
async function codeOk() {
    if (!model.code) return $message.warning("请输入图形验证码")
    const body = {...model}
    body.type = props.type;
    body.mobile = props.phone;
    showImgCode.value = false;
    state.isSending = true
    const {success, data} = await GetSMSCaptcha(body);
    state.isSending = false
    if (success) {
        state.isSend = true;
        $message.success("发送成功，请注意查收")
        startTimer()
    }
}

function startTimer() {
    stopTimer()
    state.timer = setInterval(() => {
        state.time -= 1;
        if (state.time <= 0) {
            state.isSend = false;
            stopTimer()
        }
    }, 1000)
}
function stopTimer() {
    if (state.timer) {
        clearInterval(state.timer)
        state.timer = null;
    }
}

watch(() => showImgCode.value, (value) => {
    if (value) {
        refreshImgCode()
    }
})


onMounted(() => {
    console.log("SMSCode onMounted");
})
</script>

<style scoped lang="scss">
.SMSCode {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .main-button {
        border-radius: 0 4px 4px 0;
    }

    .img-code-container {
        position: fixed;
        z-index: 10;
        width: 300px;
        left: calc(50% - 150px);
        top: calc(50% - 200px);
        padding: 10px 40px;
        border-radius: 12px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
        background: #fff;
        .label {
            padding: 10px 0;
            color: var(--el-color-danger);
            text-align: center;
            font-size: 18px;
        }
        .img-code {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin-bottom: 10px;

            .img-code-img {
                width: calc(100% - 140px);
                height: 40px;
                border-radius: 4px;
                border: 1px solid rgba(0, 0, 0, 0.1);
            }
        }
        .actions {
            padding: 10px 0;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>
<style lang="scss">
.SMSCode {
    .main-input {
        transform: translateY(1px);
        .el-input__wrapper {
            border-radius: 4px 0 0 4px;
        }
    }
}

</style>